<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function(){
				var huakuan=document.getElementById('huakuan');
				//给滑块加鼠标移动事件
				huakuan.onmouseover=function(){
					//获得滑块的值，写到title中
					document.title=huakuan.value;
				}
				//给颜色面板绑定onchange事件
				document.getElementById('yanse').onchange=function(){
					alert(this.value);
				}
			}
		</script>
	</head>
	<body>
		<form action="hd.php"></form>
		用户名：<input type="text" />
		<br /><br />
		密码：<input type="password" />
		<br /><br />
		
		邮箱：<input type="email" />
		<br /><br />
		网址：<input type="url" />
		<br /><br />
		<input type="number" min='1' max='20' step="3" value='1'/>
		<br /><br />
		<input type="date" />
		<br /><br />
		<!--语义化的标签-->
		<input type="search" />
		<br /><br />
		<input type="tel" />
		<br /><br />
		<input type="color" id='yanse'/>
		<br /><br />
		<input  type="range" min='0' max='20' step='2' value='1' id='huakuan'/>
		<br /><br />
		<input type="submit" value='提交' />
		
	</body>
</html>
